<template>
   <div class="detail-box">
      <el-dialog width="75%" top="6vh" :modal="false" :close-on-click-modal="false" title="案件详情"
         :visible.sync="caseDialog" custom-class="case-dialog">
         <div class="detail-content">
            <div class="detail-header">
               <span class="header-title">集审上传状态 0/0</span>
               <div class="detail-btn">
                  <el-button type="success" plain size="small" @click="imgDownload()">下载到本地</el-button>
                  <el-button type="primary" plain size="small" v-show="pTabInd > 1"
                     @click="choiceType()">上传集审</el-button>
                  <el-button type="info" size="small">留言</el-button>
                  <el-button type="success" size="small" @click="xiepeiUpdateCaseInfo">保存</el-button>
                  <el-button type="danger" size="small" @click="xiepeiUpdateCaseStatus">完成</el-button>
               </div>
            </div>
            <div class="detail-main">
               <div class="main-left scroll-case-list">
                  <el-form ref="caseForm" :rules="rules1" :label-position="labelPosition" label-width="100px"
                     :model="caseInfo" size="mini">
                     <el-form-item label="报案号" prop="caseNumber">
                        <el-input v-model="caseInfo.caseNumber" placeholder="请输入报案号"></el-input>
                     </el-form-item>
                     <el-form-item label="车牌号" prop="bdCarNumber">
                        <el-input v-model="caseInfo.bdCarNumber" placeholder="请输入车牌号"></el-input>
                     </el-form-item>
                     <el-form-item label="事故标的">
                        <el-select v-model="caseInfo.caseType" placeholder="请选择事故标的">
                           <el-option label="标的" value="0"></el-option>
                           <el-option label="三者" value="1"></el-option>
                           <el-option label="人伤" value="2"></el-option>
                        </el-select>
                     </el-form-item>
                     <el-form-item label="事故地点">
                        <el-input type="textarea" v-model="caseInfo.address" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="事故类型">
                        <el-input v-model="accTypeDec[caseInfo.accidentType]" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="车辆类型">
                        <el-input v-model="carTypeDec[caseInfo.carType]" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="拆检点">
                        <el-input v-model="caseInfo.licensePersonName" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="拆检点电话">
                        <el-input v-model="caseInfo.licensePersonPhone" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="查勘员工号">
                        <el-input v-model="caseInfo.surveyorNumber" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="查勘员姓名">
                        <el-input v-model="caseInfo.surveyor" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="定损类型">
                        <el-input v-model="dsTypeDec[caseInfo.taskType]" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="汽车品牌">
                        <el-input v-model="caseInfo.brandName" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="车型" v-if="caseInfo.modelOfCar">
                        <el-input v-model="caseInfo.modelOfCar" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="估损金额">
                        <el-input v-model="caseInfo.estimateMoney" :disabled="true"></el-input>
                     </el-form-item>
                     <el-form-item label="定损金额">
                        <el-input v-model="caseInfo.taskMoney" :disabled="true"></el-input>
                     </el-form-item>
                     <!-- <el-form-item label="坐席导入图片">
                  <el-input :value="caseInfo.isImportImg == '1' ? '是' : '否'" :disabled="true"></el-input>
               </el-form-item> -->
                     <el-form-item label="协赔人员">
                        <el-input v-model="caseInfo.xpUserName" :disabled="true"></el-input>
                     </el-form-item>
                     <!-- <el-form-item label="一调推修">
                  <el-input :value="caseInfo.pushName" :disabled="true"></el-input>
               </el-form-item> -->
                  </el-form>
                  <el-form :rules="rules2" label-position="top" label-width="100px" size="mini" :model="caseInfo">
                     <el-form-item label="历史备注">
                        <div class="history-notes scroll-case-list">
                           <ul>
                              <li v-for="(item, index) in caseDescList" :key="index">
                                 <span class="user-title">{{ item.uName }}</span> :
                                 <span class="user-notes">{{ item.uMsg }}</span>
                              </li>
                           </ul>
                        </div>
                     </el-form-item>
                     <el-form-item label="补充备注" prop="newsNote">
                        <el-input type="textarea" v-model="caseInfo.newsNote" placeholder="请输入事故备注（255字以内）"></el-input>
                     </el-form-item>
                     <el-form-item label="增补信息">
                        <el-input type="textarea" v-model="zbInfo" placeholder="请输入增补信息（255字以内）"></el-input>
                     </el-form-item>
                     <el-button type="primary" size="small" @click="addToCase">转为增补</el-button>
                  </el-form>
               </div>
               <div class="main-center">
                  <photo ref="photo" :photo-list="caseInfo.imageList" :taskId="caseInfo.taskId"
                     @tab-changed="handleTabChange" />
               </div>
            </div>
         </div>
      </el-dialog>
   </div>
</template>
<script>
import photo from './casePhoto/photo.vue'
import { mapState } from 'vuex'
import { xiepeicaseInfo, xiepeiUpdateCaseInfo, xiepeiUpdateCaseStatus, zbCase } from '@/api/case'
export default {
   components: { photo },
   data() {
      return {
         caseDialog: false,
         labelPosition: 'right',
         caseDescList: [],
         pTabInd: 0,
         caseInfo: {
            caseNumber: '',
            bdCarNumber: '',
            imageList: []
         },
         zbInfo: '',
         caseParams: {
            taskId: '',
            type: '1'
         },
         accTypeDec: {
            '1': '碰撞',
            '2': '火烧',
            '3': '水淹',
         },
         carTypeDec: {
            '1': '商用车',
            '2': '乘用车',
         },
         dsTypeDec: {
            '0': '图片定损',
            '1': '视频定损',
         },

         rules1: {
            caseNumber: [
               { required: true, message: '请输入报案号', trigger: 'blur' },
               { min: 22, max: 22, message: '报案号格式有误', trigger: 'blur' }
            ],
            bdCarNumber: [
               { required: true, message: '请输入车牌号', trigger: 'blur' },
               { pattern: /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/, message: '车牌号格式不正确', trigger: 'blur' }
            ]
         },
         rules2: {
            newsNote: [{ max: 255, message: '补充备注字数超限，请输入255字以内', trigger: 'blur' }]
         }
      }
   },
   created() {
   },
   computed: {
      ...mapState({
         userInfo: state => state.user.userInfo,
      })
   },
   methods: {
      getCaseInfo(caseinfo) {
         this.caseDialog = true;
         this.caseInfo = {}
         this.zbInfo = '';
         this.caseParams.taskId = this.userInfo.usertype === "4" ? caseinfo.realTaskId : caseinfo.taskId
         xiepeicaseInfo(this.caseParams).then(res => {
            this.caseInfo = { ...res }
            this.caseDescList = res.caseDesc ? res.caseDesc.cdrl || [] : []

         })
      },
      //下载到本地
      imgDownload() {
         this.$refs.photo.imgDownload(this.pTabInd);
      },
      choiceType() {
         this.$refs.photo.choiceType(this.pTabInd);
      },
      // 详情修改保存
      xiepeiUpdateCaseInfo() {
         this.$refs['caseForm'].validate((valid) => {
            if (valid) {
               let caseinfo = { ...this.caseInfo };
               caseinfo.caseDesc = this.caseInfo.newsNote;
               caseinfo.userId = this.userInfo.userId
               xiepeiUpdateCaseInfo(caseinfo).then(res => {
                  this.$message({
                     message: res.msg,
                     type: 'success'
                  })
                  if (this.caseInfo.newsNote) {
                     this.caseDescList.push({
                        uName: this.userInfo.userName,
                        uMsg: this.caseInfo.newsNote
                     })
                     this.caseInfo.newsNote = ''
                  }
               })
            } else {
               console.log(valid)
            }

         });
      },
      xiepeiUpdateCaseStatus() {
         if (this.caseInfo.seatUserId && this.caseInfo.seatUserName) {
            this.xiepeiUpdateCaseInfo();
            const finParams = {
               taskId: this.caseInfo.taskId,
               caseStatus: '3',
               userId: this.userInfo.userId
            }
            xiepeiUpdateCaseStatus(finParams).then(() => {
               this.$emit("change-dialog", false)
               // this.$message({
               //    message: '操作成功',
               //    type: 'success'
               // })
               // 发消息，cancel,finish
            })
         } else {
            this.$message("当前案件未分配坐席，不能完成!");
         }
      },
      handleTabChange(ind) {
         this.pTabInd = ind
      },
      addToCase() {
         if (
            this.caseInfo.dsType == "1" &&
            this.caseInfo.caseStatus == "1"
         ) {
            this.$message("案件正在处理，不可添加为增补")

         } else {
            if (this.zbInfo && this.zbInfo.length < 255) {
               this.$confirm('确认将此案件转为增补?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
               }).then(() => {
                  const params = {
                     taskId: this.caseInfo.taskId,
                     zbInfo: this.zbInfo
                  }
                  zbCase(params).then(() => {
                     this.xiepeiUpdateCaseInfo();
                     // this.$emit("change-dialog", false)
                     this.caseDialog = false
                     this.$emit("get-mycaseList")
                     this.$message({
                        message: '操作成功',
                        type: 'success'
                     })
                  })
               })
            } else if (this.zbInfo.length > 255) {
               this.$message("增补信息字数超限！");
            } else {
               this.$message("请输入增补信息！");
            }
         }

      }
   }
}
</script>
<style lang='scss' scoped>
.detail-content {
   height: 100%;
}

.detail-header {
   display: flex;
   justify-content: space-between;
   padding: 10px 20px;
   border-top: 1px solid #e5e5e5;
   border-bottom: 1px solid #e5e5e5;

   .header-title {
      line-height: 30px;
      font-weight: bold;
      font-size: 16px !important;
      color: #4A4A4A !important;
      letter-spacing: 0 !important;
      margin: 5px 0 0 10px !important;
   }
}

.detail-main {
   display: flex;
   padding: 10px !important;

   .main-left,
   .main-center {
      flex: 1;
      box-sizing: border-box;
      padding: 15px;
      overflow-y: auto;
   }

   .main-center {
      flex: 2;
   }

   .main-left {
      border-right: 1px solid #eee;
      max-height: 70vh;
   }

   ::v-deep .el-select {
      width: 100%;
   }

   .main-center {
      overflow: hidden;

      .el-button-group {
         width: 100%;
      }

      .el-button {
         width: 25%;
      }
   }

   .history-notes {
      width: 100%;
      height: 180px;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: auto;

      li {
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .user-title {
         display: inline-block;
         width: 65px;
         height: 20px;
         line-height: 20px;
         text-align: center;
         // border: 1px solid #ccc;
         margin-left: 3px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
      }

      .user-notes {
         width: 80%;
         float: left;
         margin-left: 6px;
         word-break: break-all;
      }
   }
}
</style>
